<template>
  <transition
    name="dialog-fade"
    @after-enter="afterEnter"
    @after-leave="afterLeave"
  >
    <div
      v-show="visible"
      class="el-dialog__wrapper"
      :style="style"
      @click.self="handleWrapperClick"
    >
      <div
        :key="key"
        ref="dialog"
        role="dialog"
        aria-modal="true"
        :aria-label="title || 'dialog'"
        class="custom-dialog"
      >
        <div class="el-dialog__header">
          <slot name="title">
            <span class="el-dialog__title" style="font-size: 16px">{{ title }}</span>
          </slot>
          <el-button
            v-if="showClose"
            type="text"
            class="el-dialog__header_btn"
            aria-label="Close"
            @click="handleClose"
          >返回<i class="el-icon--right el-icon-arrow-right" />
          </el-button>
        </div>
        <div v-if="rendered" class="el-dialog-custom-body">
          <el-scrollbar
            style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
          >
            <slot />
          </el-scrollbar>
        </div>
        <div v-if="$slots.footer" class="el-dialog__footer">
          <slot name="footer" />
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Popup from 'element-ui/src/utils/popup';
import Migrating from 'element-ui/src/mixins/migrating';
import emitter from 'element-ui/src/mixins/emitter';
export default {
  name: 'ElDialog',
  mixins: [Popup, emitter, Migrating],
  props: {
    title: {
      type: String,
      default: ''
    },

    modal: {
      type: Boolean,
      default: true
    },

    modalAppendToBody: {
      type: Boolean,
      default: true
    },

    appendToBody: {
      type: Boolean,
      default: false
    },

    lockScroll: {
      type: Boolean,
      default: true
    },

    closeOnClickModal: {
      type: Boolean,
      default: true
    },

    closeOnPressEscape: {
      type: Boolean,
      default: true
    },

    showClose: {
      type: Boolean,
      default: true
    },

    width: String,

    fullscreen: Boolean,

    customClass: {
      type: String,
      default: ''
    },

    top: {
      type: String,
      default: '15vh'
    },
    beforeClose: Function,
    center: {
      type: Boolean,
      default: false
    },

    destroyOnClose: Boolean
  },
  data() {
    return {
      closed: false,
      key: 0
    };
  },
  computed: {
    style() {
      const style = {};
      if (!this.fullscreen) {
        style.marginTop = this.top;
        if (this.width) {
          style.width = this.width;
        }
      }
      return style;
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.closed = false;
        this.$emit('open');
        this.$el.addEventListener('scroll', this.updatePopper);
        this.$nextTick(() => {
          this.$refs.dialog.scrollTop = 0;
        });
        if (this.appendToBody) {
          document.body.appendChild(this.$el);
        }
      } else {
        this.$el.removeEventListener('scroll', this.updatePopper);
        if (!this.closed) this.$emit('close');
        if (this.destroyOnClose) {
          this.$nextTick(() => {
            this.key++;
          });
        }
      }
    }
  },
  mounted() {
    if (this.visible) {
      this.rendered = true;
      this.open();
      if (this.appendToBody) {
        document.body.appendChild(this.$el);
      }
    }
  },
  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  },
  methods: {
    getMigratingConfig() {
      return {
        props: {
          'size': 'size is removed.'
        }
      };
    },
    handleWrapperClick() {
      if (!this.closeOnClickModal) return;
      this.handleClose();
    },
    handleClose() {
      if (typeof this.beforeClose === 'function') {
        this.beforeClose(this.hide);
      } else {
        this.hide();
      }
    },
    hide(cancel) {
      if (cancel !== false) {
        this.$emit('update:visible', false);
        this.$emit('close');
        this.closed = true;
      }
    },
    updatePopper() {
      this.broadcast('ElSelectDropdown', 'updatePopper');
      this.broadcast('ElDropdownMenu', 'updatePopper');
    },
    afterEnter() {
      this.$emit('opened');
    },
    afterLeave() {
      this.$emit('closed');
    }
  }
};
</script>
<style scoped>
.custom-dialog {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
}
.el-dialog__header {
  width: 100%;
  height: 40px;
  flex: 0 1 auto;
  line-height: 40px;
  font-size: 16px;
  display: flex;
  flex-flow: row nowrap;
  padding: 0px 10px;
  box-sizing: border-box;
  background-color: #F2F6FC;
  border-bottom: 1px solid #DCDFE6;
}
.el-dialog__title {
  flex:  1 1 auto;
  height: 40px;
  line-height: 40px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-dialog__header_btn {
  flex:  0 1 auto;
  height: 40px;
  width: 70px;
  font-size: 14px;
}
.el-dialog-custom-body {
  flex:  1 1 auto;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
